<template>
  <view class="templateList">
    <view class="flex_between flex_wrap">
      <view class="li" v-for="(item, index) in list" :key="index">
        <view class="item" @click="toInfo(item)" :class="getClassNames(item.type).outer">
          <view class="item_in flex_col_center" :class="getClassNames(item.type).inner">
            <image :src="getClassNames(item.type).icon" class="typeImg" mode="">
            </image>
            <view class="title_in ellipsis2" :class="getClassNames(item.type).title">
              {{ item.title }}
            </view>
            <view class="line_in" :class="getClassNames(item.type).line"></view>
            <view class="source" :class="getClassNames(item.type).source">小竹-法规库</view>
          </view>
        </view>
        <view class="title ellipsis2">
          {{ item.title }}
        </view>
      </view>
    </view>
    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>
<script>
export default {
  name: 'templateList',
  props: {
    is_hot: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    loadMoreStatus: {
      type: String,
      default: 'more',
    }
  },
  data() {
    return {
    };
  },
  methods: {
    //class类名分配
    getClassNames(type) {
      const classMap = {
        ZIP: {
          outer: "zipBg",
          inner: "zipBg_in",
          title: "zipTitle_in",
          line: "zipLine_in",
          source: "zipSource",
          icon: '@/static/img/template/icon_zip.png'
        },
        WORD: {
          outer: "wordBg",
          inner: "wordBg_in",
          title: "wordTitle_in",
          line: "wordLine_in",
          source: "wordSource",
          icon: '/static/img/template/icon_wd.png'
        },
        EXCEL: {
          outer: "excelBg",
          inner: "excelBg_in",
          title: "excelTitle_in",
          line: "excelLine_in",
          source: "excelSource",
          icon: '/static/img/template/icon_excel.png'
        },
        PPT: {
          outer: "pptBg",
          inner: "pptBg_in",
          title: "pptTitle_in",
          line: "pptLine_in",
          source: "pptSource",
          icon: '/static/img/template/icon_ppt.png'
        },
        PDF: {
          outer: "pdfBg",
          inner: "pdfBg_in",
          title: "pdfTitle_in",
          line: "pdfLine_in",
          source: "pdfSource",
          icon: '/static/img/template/icon_pdf.png'
        }
      };

      return classMap[type] || {};
    },
    //去详情
    toInfo(item) {
      uni.navigateTo({ url: `/consult/templateDetails/index?id=${item.id}` })
    }
  },
}

</script>
<style lang="scss" scoped>
.templateList {
  .li {
    width: 334rpx;

    .item {
      position: relative;
      overflow: hidden;
      margin: 22rpx 0;
      height: 451rpx;
      border-radius: 10rpx;

      .item_in {
        margin: 15rpx auto;
        overflow: hidden;
        width: 304rpx;
        height: 423rpx;
        background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%);
        border-radius: 10px;

        .typeImg {
          width: 75rpx;
          height: 75rpx;
          display: block;
          margin-top: 60rpx;
        }

        .title_in {
          margin-top: 24rpx;
          width: 231rpx;
          height: 72rpx;
          font-size: 28rpx;
          line-height: 36rpx;
        }

        .line_in {
          margin-top: 36rpx;
          width: 212rpx;
          height: 2rpx;
          opacity: 50%;
        }

        .source {
          margin-top: 25rpx;
          width: 114rpx;
          height: 36rpx;
          font-size: 24rpx;
          color: #E6CEFD;
        }
      }
    }

    .title {
      line-height: 36rpx;
    }
  }

}


/* zip样式 */
.zipBg {
  background-color: #F6EEFF !important;

  .zipBg_in {
    background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%) !important;

    .zipTitle_in {
      color: #A27AC8 !important;
    }

    .zipLine_in {
      background-color: #E6D4F7 !important;
    }

    .zipSource {
      color: #E6CEFD !important;
    }
  }
}

/* Word样式 */
.wordBg {
  background-color: #D8EFFF !important;

  .wordBg_in {
    background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%) !important;

    .wordTitle_in {
      color: #478AC0 !important;
    }

    .wordLine_in {
      background-color: #C4E0FF !important;
    }

    .wordSource {
      color: #ACCCE6 !important;
    }
  }
}

/* Excel样式 */
.excelBg {
  background-color: #DEF4ED !important;

  .excelBg_in {
    background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%) !important;

    .excelTitle_in {
      color: #58A982 !important;
    }

    .excelLine_in {
      background-color: #C5ECC4 !important;
    }

    .excelSource {
      color: #B6E2CC !important;
    }
  }
}

/* PPT样式 */
.pptBg {
  background-color: #FFEEE1 !important;

  .pptBg_in {
    background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%) !important;

    .pptTitle_in {
      color: #EE9D4C !important;
    }

    .pptLine_in {
      background-color: #F7D9BB !important;
    }

    .pptSource {
      color: #FADABB !important;
    }
  }

}

/* PDF样式 */
.pdfBg {
  background-color: #FFEAE9 !important;

  .pdfBg_in {
    background: linear-gradient(180deg, #FFFFFF 68%, rgba(255, 255, 255, 0.1) 100%) !important;

    .pdfTitle_in {
      color: #DC706E !important;
    }

    .pdfLine_in {
      background-color: #FFDAD9 !important;
    }

    .pdfSource {
      color: #FFCAC8 !important;
    }
  }
}
</style>